<template>
	<view>
		<view style="height: 24rpx;"></view>
		<view class="pay_bond_top_box">
			<view class="pay_bond_top_name">缴纳方式</view>
			<view class="pay_bond_top_way">
				<image src="https://www.cccshansong.com/chong_weapp/wechat_icon.png" mode=""></image> <text>微信支付</text>
			</view>	
		</view>
		<view class="pay_bond_content_box">
			<view class="pay_bond_content" @click="handleOpenBoard()">
				<view class="pay_bond_content_title">请输入缴纳金额</view>
				<view class="pay_bond_content_input">
					<text>¥</text>{{bond_money}}
				</view>
			</view>
			<view class="pay_bond_tip_box" v-if="delivery_reminder!=''">
				<text>还需缴纳{{delivery_reminder}}元保证金</text>
			</view>
		</view>
		<view class="pay_bond_content_btn" hover-class="hover_class" @click="handleSubmit()">立即缴纳</view>
		<cu-keyboard ref="cukeyboarditem" :defaultValue='defaultValueItem' confirmText='确定' :confirmStyle='confirmStyle'
			@change="changeItem"></cu-keyboard>	
		
	</view>
</template>

<script>
	import cuKeyboard from "@/components/cu-keyboard/cu-keyboard";
	export default {
		components: {
			cuKeyboard,
		},
		data() {
			return {
				user_bond:0,
				confirmStyle:{
					backgroundColor:'#ff6b00'
				},
				defaultValue:'',
				defaultValueItem:'',
				bond_money:'0',
				btn_status:true,
				timeStamp:'',
				nonceStr:'',
				package:'',
				signType:'',
				paySign:'',
				delivery_reminder:'',
			};
		},
		onLoad(e) {
			var a = this
			a.user_bond = e.price*1
			a.getConfig()
		},
		methods:{
			getConfig(){
				var a =this
				a.globalajax('common/getConfig',{
					value:'delivery_reminder'
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							var temp_money =  res.data.data*1
							var temp_money1 =  temp_money - a.user_bond
							if(a.user_bond < temp_money){
								a.bond_money = temp_money1.toFixed(2)
								a.defaultValueItem = a.bond_money
								a.delivery_reminder =a.bond_money 
							}
							
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						} 
					}
				); 
			},
			handleSubmit(){
				var a = this
				if(a.btn_status){
					a.btn_status = false
					uni.showLoading({
						title:'加载中'
					})
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							console.log(loginRes.code)
							a.globalajax('pay/payDeposit',{
								number:a.bond_money,
								code:loginRes.code
							},'POST',function(res) {
									console.log(res);
									uni.hideLoading()
									setTimeout(()=>{
										a.btn_status = true
									},1500)
									if(res.data.code==200){
										a.timeStamp = res.data.data.timeStamp
										a.nonceStr =  res.data.data.nonceStr
										a.package =  res.data.data.package 
										a.signType = res.data.data.signType
										a.paySign = res.data.data.paySign
										a.payWeChat()
									}else{	
										a.$showModal({
											title:'友情提示',
											content:res.data.msg,
											showCancel:false,
											confirmText:'我知道了',
											success: (res) => {
											}
										}); 
									}
								}
							);	
						}
					})
						
				}
			},
			payWeChat(){
				var a = this
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp:a.timeStamp,
				    nonceStr: a.nonceStr,
				    package: a.package,
				    signType: a.signType,
				    paySign: a.paySign,
				    success: function (res) {
				        uni.showToast({
				            title: '支付成功',
				            icon: 'success',
				        })
				        setTimeout(() => {
							uni.navigateBack()
				        }, 500);
				    },
				    fail: function (err) {
				        uni.showToast({
				            title: '支付失败',
				            icon: 'none',
				        })
						setTimeout(() => {
							uni.navigateBack()
						}, 500);
				    }
				});
			},
			handleOpenBoard(index){
				console.log(index)
				var a = this
				a.defaultValueItem = a.bond_money
				this.$refs.cukeyboarditem.open();
			},
			changeItem(e) {
				var a = this
				this.$nextTick(() => { 
					a.defaultValueItem = e;
					a.bond_money = a.defaultValueItem;
				})
				this.$forceUpdate();
				console.log("数字改变", e);
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f5f6f8;
}
.pay_bond_content_box{
	width: 686rpx;
	min-height: 204rpx;
	background-color: #fff;
	margin: 0 auto;
	margin-top: 20rpx;
	border-radius: 16rpx;
	.pay_bond_content{
		width: 686rpx;
		height: 204rpx;
		.pay_bond_content_title{
			padding-top: 24rpx;
			padding-left: 24rpx;
			color: rgba(48, 49, 51, 1);
			font-size: 30rpx;
			font-weight: bold;
		}
		.pay_bond_content_input{
			padding-left: 24rpx;
			color: rgba(48, 49, 51, 1);
			font-size: 72rpx;
			font-weight: bold;
			margin-top: 30rpx;
			text{
				font-size: 36rpx;
				margin-right: 8rpx;
			}
		}
	}
	.pay_bond_tip_box{
		height: 88rpx;
		line-height: 88rpx;
		border-top: 2rpx solid rgba(235, 238, 245, 1);
		text{
			margin-left: 24rpx;
			color: rgba(48, 49, 51, 1);
			font-size: 28rpx;
		}
	}
}
.pay_bond_content_btn{
	margin: 0 auto;
	margin-top: 64rpx;
	width: 686rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	font-size: 30rpx;
	border-radius: 12rpx;
	background-color: rgba(255, 107, 0, 1);
}
.pay_bond_top_box{
	width: 686rpx;
	height: 120rpx;
	background-color: #fff;
	margin: 0 auto;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.pay_bond_top_name{
		margin-left: 24rpx;
		color: rgba(48, 49, 51, 1);
		font-size: 30rpx;
		font-weight: bold;
	}
	.pay_bond_top_way{
		display: flex;
		align-items: center;
		margin-right: 24rpx;
		color: rgba(48, 49, 51, 1);
		font-size: 30rpx;
		image{ 
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
	}
}
</style>
